<template>
  <div class="map-content">
    <el-input clearable prefix-icon="el-icon-search" v-model="key" id="suggestId" class="mapSearchInput"
      placeholder="搜索位置"></el-input>
    <div class="baidumap" id="allmap"></div>

    <div class="searchResult">
      <div class="searchRow">
        <el-input v-model="tempAddr.address" readonly></el-input>
        <el-button class="searchBtn" type="primary">确认</el-button>
      </div>
      <!-- <div>结果：{{tempAddr}}</div> -->
    </div>

  </div>
</template>

<script>

  import {BAI_DU_MAP} from "@/constant.js"

  export default {
    data() {
      return {
        key: undefined,
        tempAddr: {}
      }
    },
    mounted() {
      // const s = document.createElement('script');
      // s.type = 'text/javascript';
      // s.src = BAI_DU_MAP;
      // document.body.appendChild(s);

      var si = setInterval(() => {
        if (window.BMap) {
          this.initMap();
          clearInterval(si);
        }
      }, 500);
    },
    methods: {
      initMap() {
        var $this = this;

        var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.331398, 39.897445);
        map.centerAndZoom(point, 17);
        map.enableScrollWheelZoom();
        // map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.addControl(new BMap.MapTypeControl());

        //首次定位,定位所在城市
        if (this.lng == 0 || this.lng == undefined) {
          var myCity = new BMap.LocalCity();
          myCity.get(function(result) {
            var cityName = result.name;
            map.setCenter(cityName);
          });
        } else { //已有定位记录,显示标记物
          var tempAddr = {
            point: {
              lng: this.lng,
              lat: this.lat
            },
            address: this.address,
          };
          var marker = new BMap.Marker(tempAddr.point); // 创建标注
          map.addOverlay(marker); // 将标注添加到地图中
          marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }

        //地图点击监听
        var geoc = new BMap.Geocoder();
        map.addEventListener("click", function(e) {
          geoc.getLocation(e.point, function(rs) {
            // $this.lng = rs.point.lng;
            // $this.lat = rs.point.lat;
            // $this.address = rs.address;
            map.clearOverlays(); //清除所有覆盖物
            var marker = new BMap.Marker(rs.point); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

            var tempAddr = {
              point: rs.point,
              address: rs.address,
              addressInfo: rs.addressComponents
            };
            $this.tempAddr = tempAddr;
            console.log('rs', rs);
            console.log('tempAddr', tempAddr)
          });
        });

        // 初始化地图,设置城市和地图级别。
        var ac = new BMap.Autocomplete({
          "input": "suggestId",
          "location": map
        });
        ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
          var value = e.item.value;
          setPlace(value.city, value.district, value.street, value.business, value);
        });

        function setPlace(city, district, street, business, info) {
          map.clearOverlays(); //清除地图上所有覆盖物
          var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: function() {
              var data = local.getResults().getPoi(0);
              var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
              map.centerAndZoom(pp, 17);
              map.addOverlay(new BMap.Marker(pp)); //添加标注

              var address = "";
              if (data.province) address += data.province;
              address += city + district;
              if (street) address += street;
              if (business) address += business;

              var tempAddr = {
                point: pp,
                address: address,
                addressInfo: info,
              }
              console.log('tempAddr', tempAddr);
              $this.tempAddr = tempAddr;
            }
          });
          local.search(city + district + street + business);
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .map-content {
    padding: 10px;
    position: relative;
  }

  .baidumap {
    height: 500px;
    border: 1px solid #C8C9CC;
  }

  /* 去除百度地图版权那行字 和 百度logo */
  .baidumap>.BMap_cpyCtrl {
    display: none !important;
  }

  .baidumap>.anchorBL {
    display: none !important;
  }

  /* 地图上左侧的搜索栏 */
  .mapSearchInput {
    position: absolute;
    z-index: 100;
    top: 20px;
    left: 20px;
    width: 400px;
  }

  /* 搜索结果 */
  .searchResult {
    width: 50%;
    margin-top: 15px;
  }

  .searchRow {
    display: flex;
    align-items: center;

    .searchBtn {
      margin-left: 10px;
    }
  }
</style>
